<template>
  <view class="notLoggedIn">
    <view class="lang">
      <image @click="goBack(1)" src="@/static/image/77.png" mode="widthFix" />
      <view @click="goTo('/pages/notLoggedIn/lang')">
        {{ $t('notLoggedIn.traditionalChinese') }}
        <image src="@/static/image/49.png" mode="widthFix" />
      </view>
    </view>
    <view class="title">
      <view>{{ $t('notLoggedIn.login') }}</view>
      <view>{{ $t('notLoggedIn.enterEmailAndPassword') }}</view>
    </view>
    <view class="ipt">
      <up-input :placeholder="$t('notLoggedIn.enterEmail')" v-model="user_name" clearable class="item" border="none">
        <template #prefix>
          <image src="@/static/image/50.png" mode="widthFix" />
        </template>
      </up-input>
      <up-input :placeholder="$t('notLoggedIn.enterPassword')" v-model="pass_word" clearable :password="eye" class="item" border="none">
        <template #prefix>
          <image src="@/static/image/52.png" mode="widthFix" />
        </template>
        <template #suffix>
          <i @click="eye = !eye" :class="eye ? 'hideEye' : 'showEye'"></i>
        </template>
      </up-input>
    </view>
    <up-button class="btn" @click="LogonFn" :text="$t('notLoggedIn.loginButton')"></up-button>
    <view class="term" @click="isAgreement = !isAgreement">
      <i :class="{ selected: isAgreement }"></i>
      {{ $t('notLoggedIn.agreementText') }}
      <text @click.stop>{{ $t('notLoggedIn.termsOfService') }}</text>
	  {{ $t('notLoggedIn.and') }}
      <text @click.stop>{{ $t('notLoggedIn.termsOfService') }}</text>
    </view>
    <view class="goReg">
      {{ $t('notLoggedIn.noAccount') }}
      <text @click="goTo('/pages/notLoggedIn/reg')">{{ $t('notLoggedIn.registerNow') }}</text>
    </view>
    <customerService />
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { onShow } from "@dcloudio/uni-app";

const instance = getCurrentInstance()?.appContext.config.globalProperties;
import { Logon } from "@/api/UserApi";
let eye = ref<boolean>(true);
let isAgreement = ref<boolean>(true);
let user_name = ref<string>('');
let pass_word = ref<string>('');
onShow(() => {
  uni.removeStorageSync('UserStatistics');
  uni.removeStorageSync('userInfo');
  uni.removeStorageSync('UserMoney');
});

const LogonFn = () => {
  if (!user_name.value) {
    uni.showToast({ title: instance?.$t('notLoggedIn.emailRequired'), icon: "none" });
    return;
  }
  if (!pass_word.value) {
    uni.showToast({ title: instance?.$t('notLoggedIn.passwordRequired'), icon: "none" });
    return;
  }
  Logon({
    user_name: user_name.value,
    pass_word: instance?.getRsaCode(pass_word.value),
  });
};
</script>

<style scoped lang="scss">
@import "../../static/scss/notLoggedIn.scss";
</style>